<header class="mb-4">
  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
    <%= crayons_icon_tag(:badge, title: t("views.admin.users.overview.roles.icon"), aria_hidden: true, class: "mr-2") %>
    <%= t("views.admin.users.overview.roles.subtitle") %>
  </h2>
  <p class="color-secondary">
    <%= t("views.admin.users.overview.roles.desc") %>
    <a href="https://admin.forem.com/docs/forem-basics/user-roles" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="<%= t("views.admin.users.overview.roles.aria_learn") %>"><%= t("views.admin.users.overview.learn") %></a>
  </p>
</header>
<% unless @user.roles.any? %>
  <div class="flex justify-between items-center">
    <p><%= t("views.admin.users.overview.roles.empty") %></p>
    <button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-title="<%= t("views.admin.users.actions.assign_role.heading") %>" data-modal-size="m" data-modal-content-selector="#add-role-modal" data-form-action="<%= user_status_admin_user_path(@user) %>">
      <%= t("views.admin.users.overview.roles.button") %>
    </button>
  </div>
<% else %>
  <ul class="flex flex-wrap gap-2">
    <% @user.roles.reject(&:tag_moderator?).each do |role| %>
      <li>
        <% if !policy(role).remove_role? %>
          <button
            class="c-pill c-pill--description-icon crayons-tooltip__activator cursor-help"
            type="button"
            aria-disabled="true">
            <%= crayons_icon_tag(:lock, class: "c-pill__description-icon", aria_hidden: true, width: 18, height: 18) %>
              <%= t("views.admin.users.overview.roles.name.#{role.name_labelize.underscore.parameterize(separator: '_')}", default: role.resource_name ? role.resource_name.to_s : role_display_name(role)) %>
            <span data-testid="tooltip" class="crayons-tooltip__content"><%= t("views.admin.users.overview.roles.locked") %></span>
          </button>
        <% else %>
          <% confirm_dialog = if role.super_admin?
                                t("views.admin.users.overview.roles.remove_confirm_super_admin")
                              else
                                t("views.admin.users.overview.roles.remove_confirm")
                              end %>
          <%= button_to url_for(action: :destroy, user_id: @user.id, role_id: role.id, resource_type: role.resource_type), method: :delete, data: { confirm: confirm_dialog }, class: "c-pill c-pill--action-icon" do %>
            <span class="screen-reader-only"><%= t("views.admin.users.overview.roles.remove") %></span>
              <%= t("views.admin.users.overview.roles.name.#{role.name_labelize.underscore.parameterize(separator: '_')}", default: role.resource_name ? role.resource_name.to_s : role_display_name(role)) %>
            <%= crayons_icon_tag(:x, class: "c-pill__action-icon", aria_hidden: true, width: 18, height: 18) %>
          <% end %>
        <% end %>
      </li>
    <% end %>
    <li>
      <button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-title="<%= t("views.admin.users.actions.assign_role.heading") %>" data-modal-size="small" data-modal-content-selector="#add-role-modal" data-form-action="<%= user_status_admin_user_path(@user) %>">
        <%= t("views.admin.users.overview.roles.button") %>
      </button>
    </li>
  </ul>
<% end %>

<%= render "admin/users/modals/add_role_modal" %>
